<template>
    <div class="main">
        <Content>
            <template #content>
                <div class="b-w p-20-30 box dispaly-col-center ">
                    <div v-if="JSON.stringify(data) != '{}'">
                        <!--  @click-node="selData" -->
                        <Tree :json="data" @click-node="clickNode"/>
                    </div>
                    <div class="cover" v-if="JSON.stringify(psData) != '{}'" v-loading="loading">
                        <div class="tem">
                            <!-- <div ref="templateTwo">
                                <TemplateTwo :data="psData" />
                            </div> -->
                            <Template :data="psData" v-if="!psData.img"/>
                          <div v-else>
<!--                            <img :src="psData.img">-->
                            <el-image
                                :src="psData.img"
                                :zoom-rate="1.2"
                                :max-scale="7"
                                :min-scale="0.2"
                                :preview-src-list="[psData.img]"
                                :initial-index="4"
                                fit="cover"
                            />
                          </div>
                        </div>
                    </div>

                </div>
            </template>
        </Content>
        <Pop />
    </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router';
// import RelationCom from '../components/relationCom.vue';
import { zpQuery, psQuery } from '@/api/index/index'
import { ref } from 'vue';
import Template from '@/components/template.vue'
import TemplateTwo from '@/components/templateTwo.vue'

let data = ref({})

const id = ref()
const getZpData = async () => {
    const res = await zpQuery({ id: id.value })
    if (res.code == 200) {
        if (res.data.length <= 1) {
            data.value = res.data[0]
            data.value.class = ["rootNode"]
        } else {
            data.value.name = '暂无'
            let child = []
            res.data.forEach(item => {
                child.push(item)
            })
            data.value.child = child
        }
        console.log(data.value)
    }
    // console.log
}

const route = useRoute()
onMounted(async () => {
    id.value = route.query.id
    await getZpData()
    selData()
})

// 点击名字
let loading = ref(false)
const psData = ref({})
const selData = async () => {
    let newData = JSON.parse(JSON.stringify(data.value))
    if (newData.child) delete newData.child
    if (newData.class) delete newData.class
    console.log(data, 'dddddd')
    loading.value = true
    const res = await psQuery(newData)
    if (res.code == 200) {
        psData.value = res.data
        loading.value = false
    }
    console.log(res, 'res')
}

const clickNode = async (data) => {
  let newData = JSON.parse(JSON.stringify(data))
  console.log(newData, 'newData')
  if (newData.child) delete newData.child
  if (newData.class) delete newData.class
  const res = await psQuery(newData)
  if (res.code == 200) {
    psData.value = res.data
  }
}
</script>

<style lang="scss" scoped>
.main {
    .box {
        border-top: 3px solid $primary-color;

        .cover {
            border-top: 2px dashed #ccc;
            padding-top: 20px;

            img {
                width: 100%;
                height: 675px;
            }
        }
    }
}
</style>